<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>弹出层</title>
	<!--弹出层 开始 -->
	<link type="text/css" rel="stylesheet" href="css/zdialog.css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/zdialog.js"></script>
	<!--弹出层 结束 -->
</head>

<body>
	<div class="mui-content-padded" style="text-align: center;">
		<button id="alertBtn" type="button" class="zbox-btn zbox-btn-blue zbox-btn-outlined">警告消息框</button>
		<div id="app"></div>
	</div>
</body>
<script>

	$(document).ready(function () {
		iniData();
	});

	function iniData() {
		var mydata1 = [{ "name": "zhengyabo", "age": 23, "sex": "male", "internet": "dance" }];
		var mydata2 = [{ "name": "zhengyb", "age": 23, "sex": "Female", "internet": "run" }];
		var dic = { "name": "姓名", "age": "年龄", "sex": "性别", "internet": "兴趣" };
		var data1 = mydata1[0];
		var data2 = mydata2[0];
		var reval = "<table>";
		reval += "<tr height='28'>";
		reval += "<th align=\"center\">栏位</th>";
		reval += "<th align=\"center\">巡检数据</th>";
		reval += "<th align=\"center\">GIS数据</th>";
		reval += "<th align=\"center\">结果</th>";
		reval += "<th align=\"center\">更新</th>";
		reval += "</tr>";
		for (item in data1) {
			reval += "<tr height='28'>";
			reval += "<td align=\"center\">" + dic[item] + "</td>";
			reval += "<td align=\"center\">" + data1[item] + "</td>";
			reval += "<td align=\"center\">" + data2[item] + "</td>";
			if (data1[item] == data2[item]) {
				reval += "<td align=\"center\">" + btnStatus("正常", "#4CAD49") + "</td>";
				reval += "<td align=\"center\"></td>";
			}
			else {
				reval += "<td align=\"center\">" + btnStatus("异常", "#ff0000") + "</td>";
				reval += "<td align=\"center\"><input type=\"checkbox\"  name=\"abnormalchk\"  value=\"" + item + "_" + data1[item] + "\"></td>";
			}
			reval += "</tr>";
		}
		reval += "</table>";
		$("#app").append(reval);
	}

	function btnStatus(text, color) {
		return "<span  style=\"background-color:" + color + ";padding: 2px 5px;margin-left:10px;border-radius: 4px;opacity: 1;\"><span class=\"text\" style=\"color:#fff\">" + text + "</span></span>";
	}

	$("#alertBtn").click(function () {
		var AbnormalValue = "";
		$("[name = abnormalchk]:checkbox").each(function () {
			if ($(this).context.checked) {
				AbnormalValue += $(this).val() + ",";
			}
		});
		if (AbnormalValue == "") {
			alert("请选择异常的栏位项！！！");
			return;
		}
		else {
			alert(AbnormalValue.trimEnd(','));
		}
	})

	String.prototype.trimEnd = function (c) {
		if (c == null || c == "") {
			var str = this;
			var rg = /s/;
			var i = str.length;
			while (rg.test(str.charAt(--i)));
			return str.slice(0, i + 1);
		}
		else {
			var str = this;
			var rg = new RegExp(c);
			var i = str.length;
			while (rg.test(str.charAt(--i)));
			return str.slice(0, i + 1);
		}
	}
</script>

</html>